<!--  -->
<template>
  <div class="container">
    <van-nav-bar :title="activityname" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="vote_banner">
      <img src="../assets/vote_img.jpeg">
    </div>
    <div class="userinfor">
      <img width="50" height="50" src="../assets/headimg1.jpg" class="userhead" />
      <span class="username">姓名</span>
    </div>
    <van-divider />
    <UserVoteInfo></UserVoteInfo>
    <van-divider />
    <div class="userinformation">
      <div class="userimg">
      </div>
      <p class="information">
        我是一个性格开朗，外向的小伙子.学习刻苦认真，成绩优秀，为人诚实守信，有很强的职责感，有团队意识和合作精神，吃苦耐劳，此刻我拥有年轻和知识，我能够用热情和活力，自信和学识来克服毕业后生活和工作的各种困难，用自己的学习潜力和分析处理问题的协调，管理潜力去完成今后美丽的人生.
      </p>
    </div>
    <van-button type="primary" class="vote_button">投TA一票</van-button>
    <van-button plain type="primary" color="#fe721f" @click="share">为我拉票</van-button>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

  </div>
</template>

<script>
  import UserVoteInfo from "../components/User_Vote_info.vue"
  export default {
    data() {
      return {
        showShare: false,
        options: [{
            name: '微信',
            icon: 'wechat'
          },
          {
            name: '微博',
            icon: 'weibo'
          },
          {
            name: '复制链接',
            icon: 'link'
          },
          {
            name: '分享海报',
            icon: 'poster'
          },
          {
            name: '二维码',
            icon: 'qrcode'
          },
        ],
      };
    },

    components: {
      UserVoteInfo
    },
    created() {
      this.activityname = this.$store.state.title
    },
    computed: {},

    methods: {
      share() {
        this.showShare = true
      },
      onClickLeft() {
        this.$router.push({
          path: "/vote"
        })
      },
      onSelect(option) {
        console.log(option.name);
        this.showShare = false;
      },
    }
  }
</script>
<style scoped lang="less">
  .container {
    padding-bottom: 100px;

    .vote_banner img {
      width: 100%;
      margin: 0 auto;
    }

    .userinfor {
      display: flex;
      align-items: center;
      padding: 0 20px;
      padding-top: 10px;

      .userhead {
        border-radius: 100%;
      }

      .username {
        font-weight: bold;
        margin-left: 10px;
      }
    }

    .userinformation {

      .userimg {
        width: 200px;
        height: 250px;
        background: url(/img/headimg1.b6c88877.jpg);
        background-size: cover;
        background-position: center;
        margin: 0 auto;
      }

      .information {
        text-align: justify;
        text-indent: 2em;
        width: 90%;
        margin: 10px auto;
        line-height: 2em;
        font-size: 13px;
        color: #5c5c5c;
      }
    }



    .vote_button {
      background-image: linear-gradient(to right, #ffd52e, #fe721f);
      border-width: 0;
      margin-right: 20px;
    }
  }
</style>